<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="">
        <div class="" style="">
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Layout-demo-basic">基本</a></li>
                <li><a href="#src-components-Layout-demo-admin">管理中心</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>General 常规</h1>
        <section class="markdown">
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
            <p>页面布局时使用，使用24栏栅格设计，在Layout组件下有两个子组件，分别是<code>Row</code>和<code>Col</code>，代表行和列，由于Col是HTML原生标签，所以使用时不能使用Col标签，用法示例：
            </p>
            <pre class="language-js"><code></code></pre>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
    </section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-1-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box" id="src-components-Layout-demo-basic">
                <section id="J_vue_qseytwyoygp" class="code-box-demo color-palette-box">
                     <div class="row">
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Primary</h4>

                          <div class="color-palette-set">
                            <div class="bg-light-blue disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-light-blue color-palette"><span>#3c8dbc</span></div>
                            <div class="bg-light-blue-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Info</h4>

                          <div class="color-palette-set">
                            <div class="bg-aqua disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-aqua color-palette"><span>#00c0ef</span></div>
                            <div class="bg-aqua-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Success</h4>

                          <div class="color-palette-set">
                            <div class="bg-green disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-green color-palette"><span>#00a65a</span></div>
                            <div class="bg-green-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Warning</h4>

                          <div class="color-palette-set">
                            <div class="bg-yellow disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-yellow color-palette"><span>#f39c12</span></div>
                            <div class="bg-yellow-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Danger</h4>

                          <div class="color-palette-set">
                            <div class="bg-red disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-red color-palette"><span>#f56954</span></div>
                            <div class="bg-red-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Gray</h4>

                          <div class="color-palette-set">
                            <div class="bg-gray disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-gray color-palette"><span>#d2d6de</span></div>
                            <div class="bg-gray-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                      </div>
                      <!-- /.row -->
                      <div class="row">
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Navy</h4>

                          <div class="color-palette-set">
                            <div class="bg-navy disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-navy color-palette"><span>#001F3F</span></div>
                            <div class="bg-navy-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Teal</h4>

                          <div class="color-palette-set">
                            <div class="bg-teal disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-teal color-palette"><span>#39CCCC</span></div>
                            <div class="bg-teal-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Purple</h4>

                          <div class="color-palette-set">
                            <div class="bg-purple disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-purple color-palette"><span>#605ca8</span></div>
                            <div class="bg-purple-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Orange</h4>

                          <div class="color-palette-set">
                            <div class="bg-orange disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-orange color-palette"><span>#ff851b</span></div>
                            <div class="bg-orange-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Maroon</h4>

                          <div class="color-palette-set">
                            <div class="bg-maroon disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-maroon color-palette"><span>#D81B60</span></div>
                            <div class="bg-maroon-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 col-md-2">
                          <h4 class="text-center">Black</h4>

                          <div class="color-palette-set">
                            <div class="bg-black disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-black color-palette"><span>#111111</span></div>
                            <div class="bg-black-active color-palette"><span>Active</span></div>
                          </div>
                        </div>
                        <!-- /.col -->
                      </div>
                      <!-- /.row -->
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Layout-demo-basic">基本</a></div>
                    <div>
                        <p>
                            <!-- react-text: 2265 -->展示了所有栅格布局样例
                            <!-- /react-text -->
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper">
                    <div class="highlight"><pre class="language-jsx"></pre></div>
                </section>
            </section>
        </div>
    </div>
    <style type="text/css">
    .code-box-demo .color-palette {
      height: 35px;
      line-height: 35px;
      text-align: center;
    }

    .code-box-demo .color-palette-set {
      margin-bottom: 15px;
    }

    .code-box-demo .color-palette span {
      display: none;
      font-size: 12px;
    }

    .code-box-demo .color-palette:hover span {
      display: block;
    }

    .color-palette-box h4 {
      position: absolute;
      top: 100%;
      left: 25px;
      margin-top: -40px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 12px;
      display: block;
      z-index: 7;
    }
  </style>
</article>